<!--
 * @ Author: 紫衣
 * @ Create Time: 2022-12-26 20:40:32
 * @ Email: 15227974559@163.com
 * @ Modified by: --
 * @ Modified time: 2023-01-04 17:23:17
 * @ Description:
 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .wrap {
        display: flex;
        width: 1260px;
        /* border: 1px solid #ccc; */
        padding: 10px;
        margin: 60px auto;
        overflow: hidden;
      }
      .cut {
        width: 500px;
        height: 400px;
        /* border: 1px solid #ccc; */
      }
      .show-wrap {
        width: 400px;
        padding-left: 20px;
        position: relative;
      }

      p.title {
        font-size: 16px;
        text-align: center;
        color: gray;
        line-height: 50px;
      }

      .show {
        /* border: 1px solid #ccc; */
        height: 350px;
      }

      button {
        padding: 10px 26px;
        border: 1px solid #ccc;
        background: #e8f3ff;
        outline: none;
        cursor: pointer;
        border-radius: 2px;
        margin: 10px 0;
      }
      button:hover {
        background: #e1eefc;
      }

      .tools {
        flex: 1;
        padding: 0 20px;
      }
      .form-wrap {
        height: 350px;
      }

      input {
        padding: 8px 8px;
        border: 1px solid #ccc;
        outline: none;
        width: 30px;
      }

      .hide {
        display: none;
      }
      h1{
        text-align: center;
        line-height: 100px;
        letter-spacing: 10px;
        color: green;
        border-bottom: 1px dashed #666;
      }
    </style>
  </head>
  <body>
    <h1>裁剪工具</h1>
    <div class="wrap">
      <div class="cut-wrap">
        <div id="cutWrap" class="cut"></div>
        <p class="title"><button id="choiceImage">选择图片</button></p>
        <p>
          <input
            type="file"
            class="hide"
            name="uploadFile"
            id="uploadFile"
            onchange="changeFile()"
          />
        </p>
      </div>
      <div class="show-wrap">
        <p class="title">预览</p>
        <div id="showWrap" class="show"></div>
        <p class="title"><button id="saveAsImage">保存本地</button></p>
      </div>
      <div class="tools">
        <p class="title">画布配置</p>
        <div class="form-wrap">
          <p>
            长宽比：<input type="text" id="paneWidth" /> :
            <input type="text" id="paneHeight" />
          </p>
          <!-- <p class="title">内置裁剪图形</p>
          <p>
            <button>矩形</button>
            <button>圆形</button>
            <button>菱形</button>
            <button>五角星</button>
            <button>三角形</button>
          </p> -->
        </div>
        <p class="title"><button id="resetCanvas">重置画布</button></p>
      </div>
    </div>

    <!-- <p><img src="" id="imgShow" alt="预览图片" width="600px" /></p> -->
  </body>

  <script src="./index.js"></script>

  <script>
    const cutWrap = createCutImage('cutWrap')
    // const imageWrap = document.getElementById('imgShow')

    const changeFile = async (e) => {
      e = e || event
      const file = e.target.files[0]
      const image = await promiseGetImage(file)
      cutWrap.setImage(image)
    }

    const choiceImageButton = document.getElementById('choiceImage')
    choiceImageButton.addEventListener('click', function () {
      document.getElementById('uploadFile').click()
    })

    const resetCanvasButton = document.getElementById('resetCanvas')
    resetCanvasButton.addEventListener('click', function () {
      const valPaneWidth = document.getElementById('paneWidth').value || 1
      const valPaneHeight = document.getElementById('paneHeight').value || 1

      const _config = {
        clipType: valPaneWidth + ':' + valPaneHeight,
      }

      cutWrap.setConfig(_config)
    })

    const saveAsImageButton = document.getElementById('saveAsImage')
    saveAsImageButton.addEventListener('click', function () {
      cutWrap.saveAsImage()
    })
  </script>
</html>
